<!--
    @name 工单详情总部店
    @authorshensai
    @date 2021-02-24
-->
<template>
  <section>
    <!-- 顶部按钮 -->
    <div class="btns-container">
      <el-button v-for="item in formButtons" :key="item.comKey">
        {{ item.text }}
      </el-button>
    </div>
    <!-- 车辆信息 -->
    <QueryComponent :dynamic-inputs="formInputs_1" title="车辆信息" />
    <!-- 派工信息 -->
    <div class="checkbox-wrapper">
      <el-checkbox v-for="item in formCheckboxs" :key="item.key">{{
        item.text
      }}</el-checkbox>
    </div>
    <QueryComponent :dynamic-inputs="formInputs_2" title="派工信息" />
    <!-- 车主信息 -->
    <QueryComponent :dynamic-inputs="formInputs_3" title="车主信息" />
    <!-- 三个文本域 -->
    <div class="textarea-header">
      <div class="filter-container filter-title textarea-header__item">
        客户描述
      </div>
      <div class="filter-container filter-title textarea-header__item">
        上次建议维修项目
      </div>
      <div class="filter-container filter-title textarea-header__item">
        本次建议维修项目
      </div>
    </div>
    <OneTableTemplate :dynamic-components="textareaInputs" />
    <!-- 服务活动 -->
    <QueryComponent ref="table_1" :dynamic-tables="tableHeader_1" :is-show-pagination="false" ::is-show-select="false" title="服务活动" />
    <!-- 保养套餐/商城精品 -->
    <QueryComponent ref="table_2" :dynamic-tables="tableHeader_2" :is-show-pagination="false" title="保养套餐/商城精品" />
    <!-- 维修信息 -->
    <div class="filter-container filter-title">维修信息</div>
    <!-- 维修信息 下拉框 -->
    <div class="mainten-select">
      维修类型：<el-select />
    </div>
    <!-- 维修信息 表格一 -->
    <div class="mainten-table__line">
      <span class="mainten-table__line-info">维修项目</span>
      <span class="mainten-table__line-btns">
        <el-button>新增</el-button>
        <el-button>删除</el-button>
      </span>
    </div>
    <OneTableTemplate
      ref="table_3_1"
      :dynamic-table-cols="tableHeader_3_1"
      :is-show-pagination="false"
    />
    <!-- 维修信息 表格二 -->
    <div class="mainten-table__line">
      <span class="mainten-table__line-info">维修备件</span>
      <span class="mainten-table__line-btns">
        <el-button>新增</el-button>
        <el-button>删除</el-button>
      </span>
    </div>
    <OneTableTemplate
      ref="table_3_2"
      :dynamic-table-cols="tableHeader_3_2"
      :is-show-pagination="false"
    />
    <!-- 维修信息 表格三 -->
    <div class="mainten-table__line">
      <span class="mainten-table__line-info">其他项目</span>
      <span class="mainten-table__line-btns">
        <el-button>新增</el-button>
        <el-button>删除</el-button>
      </span>
    </div>
    <OneTableTemplate
      ref="table_3_3"
      :dynamic-table-cols="tableHeader_3_3"
      :is-show-pagination="false"
    />
    <!-- 费用信息 -->
    <QueryComponent ref="table_4" :dynamic-inputs="formInputs_4" :dynamic-tables="tableHeader_4" :is-show-pagination="false" :is-show-select="false" title="费用信息" />
  </section>
</template>

<script>
import OneTableTemplate from '@/components/templates/oneTable'
// import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import QueryComponent from '@/components/QueryComponent/QueryComponent'
export default {
  name: 'SysorderDetails',
  // mixins: [oneTableWithViewTemplateMixins],
  components: {
    OneTableTemplate,
    QueryComponent
  },
  data() {
    return {

      formInputs_1: [
        {
          compKey: 'key0',
          labelName: '车牌号：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: 'VIN码：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '品牌：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '车系：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '车型编码：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '车型名称：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '颜色：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '车辆用途：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key8',
          labelName: '行驶里程：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'key9',
          labelName: '购车日期：',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key10',
          labelName: '交车日期：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],
      formInputs_2: [
        {
          compKey: 'key0',
          labelName: '派工单号：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '服务顾问：',
          codeField: 'saleOrderCode',
          lookuptype: 'VE0185',
          component: () => import('@/components/org/LookupValue'),
          type: 'dropdownList',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '送修人：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '送修人电话：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '到店时间：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '预计交车时间：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '工单状态：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '委外门店：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],
      formInputs_3: [
        {
          compKey: 'key0',
          labelName: '用户ID：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '车主姓名：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '车主电话：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '车主性质：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '证件号码：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '省份：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '城市：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '区县：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key8',
          labelName: '详细地址：',
          codeField: 'isAssign',
          isMul: false,
          component: () =>
            import('@/components/org/commonInput/textareaInput'),
          // type: "textarea",
          type: 'inputText',
          isMust: true,
          span: 18,
          disabled: true
        }
      ],
      formCheckboxs: [
        {
          key: 'key0',
          text: '库存车',
          model: ''
        },
        {
          key: 'key1',
          text: '取车',
          model: ''
        },
        {
          key: 'key2',
          text: '送车',
          model: ''
        },
        {
          key: 'key3',
          text: '救援',
          model: ''
        },
        {
          key: 'key4',
          text: '在店等待',
          model: ''
        },
        {
          key: 'key5',
          text: '洗车',
          model: ''
        }
      ],
      textareaInputs: [
        {
          compKey: 'key0',
          // labelName: "详细地址：",
          codeField: 'isAssign',
          isMul: false,
          component: () =>
            import('@/components/org/commonInput/textareaInput'),
          // type: "textarea",
          type: 'inputText',
          isMust: true,
          span: 8,
          disabled: true
        },
        {
          compKey: 'key1',
          // labelName: "详细地址：",
          codeField: 'isAssign',
          isMul: false,
          component: () =>
            import('@/components/org/commonInput/textareaInput'),
          // type: "textarea",
          type: 'inputText',
          isMust: true,
          span: 8,
          disabled: true
        },
        {
          compKey: 'key2',
          // labelName: "详细地址：",
          codeField: 'isAssign',
          isMul: false,
          component: () =>
            import('@/components/org/commonInput/textareaInput'),
          // type: "textarea",
          type: 'inputText',
          isMust: true,
          span: 8,
          disabled: true
        }
      ],
      tableHeader_1: [

        {
          label: '活动编号',
          prop: ''
        },
        {
          label: '活动名称',
          prop: ''
        },
        {
          label: '活动类型',
          prop: ''
        },
        {
          label: '开始日期',
          prop: ''
        },
        {
          label: '结束日期',
          prop: ''
        }
      ],
      tableHeader_2: [

        {
          label: '订单号',
          prop: ''
        },
        {
          label: '类别',
          prop: ''
        },
        {
          label: '保养套餐/精品编码',
          prop: ''
        },
        {
          label: '保养套餐/精品名称',
          prop: ''
        },
        {
          label: '使用次数/数量',
          prop: ''
        },
        {
          label: '有效日期',
          prop: ''
        },
        {
          label: '购车日期',
          prop: ''
        }
      ],
      tableHeader_3_1: [
        {
          label: '工时编码',
          prop: ''
        },
        {
          label: '维修内容',
          prop: ''
        },
        {
          label: '付费性质',
          prop: ''
        },
        {
          label: '工时数',
          prop: ''
        },
        {
          label: '工时单价',
          prop: ''
        },
        {
          label: '费用合计',
          prop: ''
        },
        {
          label: '维修类别',
          prop: ''
        },

        {
          label: '折扣率',
          prop: ''
        },
        {
          label: '费用预估',
          prop: ''
        },
        {
          label: '套餐/精品编码',
          prop: ''
        },
        {
          label: '是否委外',
          prop: ''
        }
      ],
      tableHeader_3_2: [
        {
          label: '备件编码',
          prop: ''
        },
        {
          label: '备件名称',
          prop: ''
        },
        {
          label: '付费性质',
          prop: ''
        },
        {
          label: '数量',
          prop: ''
        },
        {
          label: '单价',
          prop: ''
        },
        {
          label: '费用合计',
          prop: ''
        },
        {
          label: '维修类别',
          prop: ''
        },

        {
          label: '折扣率',
          prop: ''
        },
        {
          label: '费用预估',
          prop: ''
        },
        {
          label: '',
          prop: ''
        },
        {
          label: '是否委外',
          prop: ''
        }
      ],
      tableHeader_3_3: [
        {
          label: '其他项目',
          prop: ''
        },
        {
          label: '付费性质',
          prop: ''
        },
        {
          label: '费用',
          prop: ''
        },
        {
          label: '套餐/精品编码',
          prop: ''
        },
        {
          label: '备注',
          prop: ''
        }
      ],
      formInputs_4: [
        {
          compKey: 'key0',
          labelName: '索赔：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '内部：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '保险：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '客户：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '工时费：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '备件费：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '其他费用：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '费用合计：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],
      tableHeader_4: [
        {
          label: 'PDI',
          prop: ''
        },
        {
          label: '首保',
          prop: ''
        },
        {
          label: '索赔',
          prop: ''
        },
        {
          label: '延保',
          prop: ''
        },
        {
          label: '外返',
          prop: ''
        },
        {
          label: '内返',
          prop: ''
        },
        {
          label: '定保',
          prop: ''
        },
        {
          label: '事故',
          prop: ''
        },
        {
          label: '机修',
          prop: ''
        },
        {
          label: '商城',
          prop: ''
        },
        {
          label: '其他',
          prop: ''
        }
      ]
    }
  },
  mounted() {
    this.$refs.table_4.list = this.$refs.table_3_3.list = this.$refs.table_3_2.list = this.$refs.table_3_1.list = this.$refs.table_2.list = this.$refs.table_1.list = [
      {
        index: 1
      },
      {
        index: 2
      },
      {
        index: 3
      }
    ]
  }
}
</script>

<style lang="scss" scoped>

	.checkbox-wrapper {
		width: 100%;
		padding: 0 10px;
		background-color: #fff;
		.el-checkbox {
			float: right;
			margin-top: 10px;
		}
	}
	.textarea-header {
		width: 100%;
        height: 30px;
		background-color: #fff;
		&__item {
			width: calc(100% / 3);
			float: left;
		}
	}
    .mainten-select {
        width: 100%;
        height: 30px;
        padding: 0 20px;
        background-color: #fff;
    }
    .mainten-table__line {
        width: 100%;
        height: 30px;
        padding: 0 20px;
        line-height: 30px;
        background-color: #fff;
        &-info {
            float: left;
        }
        &-btns {
            float: right;
        }
    }
</style>
